// 自动扩展父节点
<template>
  <el-button @click="graphEmbed" type="primary" style="margin: 10px">嵌套</el-button>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

const graphEmbed = () => {
  ElMessage({
    message: "嵌套",
    type: "success",
  });
  const child = graph.addNode({
    x: 120,
    y: 80,
    width: 120,
    height: 60,
    zIndex: 10,
    label: "Child\n(embedded)",
    attrs: {
      body: {
        fill: "green",
      },
      label: {
        fill: "#fff",
      },
    },
  });

  const parent = graph.addNode({
    x: 80,
    y: 40,
    width: 320,
    height: 240,
    zIndex: 1,
    label: "Parent\n(try to move me)",
  });

  parent.addChild(child);
  graph.on("node:change:size", ({ node, options }) => {
    if (options.skipParentHandler) {
      return;
    }

    const children = node.getChildren();
    if (children && children.length) {
      node.prop("originSize", node.getSize());
    }
  });

  graph.on("node:change:position", ({ node, options }) => {
    if (options.skipParentHandler) {
      return;
    }

    const children = node.getChildren();
    if (children && children.length) {
      node.prop("originPosition", node.getPosition());
    }

    const parent = node.getParent();
    if (parent && parent.isNode()) {
      let originSize = parent.prop("originSize");
      if (originSize == null) {
        parent.prop("originSize", parent.getSize());
      }
      originSize = parent.prop("originSize");

      let originPosition = parent.prop("originPosition");
      if (originPosition == null) {
        parent.prop("originPosition", parent.getPosition());
      }
      originPosition = parent.prop("originPosition");

      let x = originPosition.x;
      let y = originPosition.y;
      let cornerX = originPosition.x + originSize.width;
      let cornerY = originPosition.y + originSize.height;
      let hasChange = false;

      const children = parent.getChildren();
      if (children) {
        children.forEach((child) => {
          const bbox = child.getBBox();
          const corner = bbox.getCorner();

          if (bbox.x < x) {
            x = bbox.x;
            hasChange = true;
          }

          if (bbox.y < y) {
            y = bbox.y;
            hasChange = true;
          }

          if (corner.x > cornerX) {
            cornerX = corner.x;
            hasChange = true;
          }

          if (corner.y > cornerY) {
            cornerY = corner.y;
            hasChange = true;
          }
        });
      }

      if (hasChange) {
        parent.prop(
          {
            position: { x, y },
            size: { width: cornerX - x, height: cornerY - y },
          },
          // Note that we also pass a flag so that we know we shouldn't
          // adjust the `originPosition` and `originSize` in our handlers.
          { skipParentHandler: true }
        );
      }
    }
  });
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
